<template>
  <view class="job-detail-page">
    <!-- 顶部导航栏 -->
 
    <!-- 职位基本信息 -->
    <view class="job-header-card">
      <!-- 紧急/热门标签 -->
      <view class="job-tag" v-if="job.isUrgent">紧急招聘</view>
      <view class="job-tag hot" v-if="job.isHot && !job.isUrgent">热门职位</view>
      
      <view class="job-title">{{ job.title }}</view>
      
      <view class="salary-box">
        <text class="salary">{{ job.salary }}{{ job.salaryPeriod }}</text>
      </view>
      
      <view class="job-meta">
        <view class="meta-item">{{ job.location }}</view>
        <view class="meta-item">{{ job.experience }}</view>
        <view class="meta-item">{{ job.education }}</view>
        <view class="meta-item">{{ job.modeText }}</view>
      </view>
      
      <view class="job-actions">
        <view class="action-btn collect-btn" @click="toggleCollect">
          <uni-icons 
            type="heart" 
            size="20" 
            :color="job.collected ? '#FF4D4F' : '#86909C'"
            :filled="job.collected"
          ></uni-icons>
          <text class="action-text">{{ job.collected ? '已收藏' : '收藏' }}</text>
        </view>
        <view class="action-btn share-btn" @click="showShareModal">
          <uni-icons type="share" size="20" color="#86909C"></uni-icons>
          <text class="action-text">分享</text>
        </view>
        <view class="action-btn report-btn" @click="showReportModal">
          <uni-icons type="alert" size="20" color="#86909C"></uni-icons>
          <text class="action-text">举报</text>
        </view>
      </view>
    </view>

    <!-- 公司信息 -->
    <view class="company-info-card">
      <view class="company-header">
        <image :src="job.companyLogo" alt="公司logo" class="company-logo"></image>
        <view class="company-basic">
          <view class="company-name">{{ job.companyName }}</view>
          <view class="company-desc">{{ job.companyDesc }}</view>
        </view>
        <view class="view-company-btn" @click="viewCompany">
          <text>查看公司</text>
          <uni-icons type="right" size="16"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 职位详情内容 -->
    <view class="job-content">
      <!-- 职位详情 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="clipboard" size="18" class="title-icon"></uni-icons>
          <text>职位详情</text>
        </view>
        <view class="section-content job-description">
          <view class="description-item" v-for="(item, index) in job.description" :key="index">
            <view class="item-title">{{ index === 0 ? '工作内容' : '任职要求' }}</view>
            <view class="item-content">
              <view class="content-point" v-for="(point, i) in item" :key="i">
                <view class="point-icon"></view>
                <text class="point-text">{{ point }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 专业要求 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="airplane" size="18" class="title-icon"></uni-icons>
          <text>专业要求</text>
        </view>
        <view class="section-content">
          <view class="requirement-grid">
            <view class="requirement-item">
              <view class="requirement-label">执照要求</view>
              <view class="requirement-value">
                <view class="license-tag" v-for="(license, i) in job.licenseRequirements" :key="i">
                  {{ license }}
                </view>
                <view class="license-tag" v-if="job.licenseRequirements.length === 0">无要求</view>
              </view>
            </view>
            
            <view class="requirement-item">
              <view class="requirement-label">设备经验</view>
              <view class="requirement-value">
                <view class="equipment-tag" v-for="(equip, i) in job.droneTypes" :key="i">
                  {{ equip }}
                </view>
              </view>
            </view>
            
            <view class="requirement-item">
              <view class="requirement-label">技能要求</view>
              <view class="requirement-value">
                <view class="skill-tag" v-for="(skill, i) in job.skills" :key="i">
                  {{ skill }}
                </view>
              </view>
            </view>
            
            <view class="requirement-item">
              <view class="requirement-label">项目经验</view>
              <view class="requirement-value">{{ job.projectExperience }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 福利待遇 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="gift" size="18" class="title-icon"></uni-icons>
          <text>福利待遇</text>
        </view>
        <view class="section-content">
          <view class="benefits-list">
            <view class="benefit-item" v-for="(benefit, i) in job.benefits" :key="i">
              <uni-icons type="checkmark" size="16" class="benefit-icon"></uni-icons>
              <text class="benefit-text">{{ benefit }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="content-section contact-section">
        <view class="section-title">
          <uni-icons type="phone" size="18" class="title-icon"></uni-icons>
          <text>联系方式</text>
        </view>
        <view class="section-content contact-info">
          <view class="contact-item">
            <uni-icons type="user" size="20" class="contact-icon"></uni-icons>
            <view class="contact-detail">
              <view class="contact-label">联系人</view>
              <view class="contact-value">{{ job.contactPerson }}</view>
            </view>
          </view>
          <view class="contact-item">
            <uni-icons type="phone" size="20" class="contact-icon"></uni-icons>
            <view class="contact-detail">
              <view class="contact-label">电话</view>
              <view class="contact-value">{{ job.contactPhone }}</view>
            </view>
          </view>
          <view class="contact-item">
            <uni-icons type="email" size="20" class="contact-icon"></uni-icons>
            <view class="contact-detail">
              <view class="contact-label">邮箱</view>
              <view class="contact-value">{{ job.contactEmail }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 相似职位 -->
      <view class="content-section similar-jobs">
        <view class="section-title">
          <uni-icons type="copy" size="18" class="title-icon"></uni-icons>
          <text>相似职位</text>
        </view>
        <view class="section-content">
          <view 
            class="similar-job-item" 
            v-for="(item, i) in similarJobs" 
            :key="i"
            @click="gotoSimilarJob(item)"
          >
            <view class="similar-job-title">{{ item.title }}</view>
            <view class="similar-job-company">{{ item.companyName }}</view>
            <view class="similar-job-meta">
              <view class="similar-meta-item">{{ item.location }}</view>
              <view class="similar-meta-item">{{ item.experience }}</view>
              <view class="similar-meta-item salary">{{ item.salary }}{{ item.salaryPeriod }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部申请按钮 -->
    <view class="apply-bar">
      <button class="apply-btn" @click="showApplyModal">
        <uni-icons type="upload" size="18" class="btn-icon"></uni-icons>
        立即申请
      </button>
      <button class="chat-btn" @click="startChat">
        <uni-icons type="chatbubble" size="18" class="btn-icon"></uni-icons>
        在线咨询
      </button>
    </view>

    <!-- 申请弹窗 -->
    <view class="apply-modal" v-if="showApplyModal">
      <view class="modal-mask" @click="closeApplyModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">申请职位</text>
          <uni-icons type="close" size="22" class="modal-close" @click="closeApplyModal"></uni-icons>
        </view>
        
        <view class="resume-upload">
          <text class="upload-title">选择简历</text>
          <view class="upload-area" @click="selectResume">
            <uni-icons type="cloud-upload" size="36" class="upload-icon"></uni-icons>
            <text class="upload-text">点击上传简历</text>
            <text class="upload-desc">支持PDF、Word格式，不超过5MB</text>
          </view>
          
          <view class="resume-preview" v-if="selectedResume">
            <uni-icons type="document" size="20" class="resume-icon"></uni-icons>
            <text class="resume-name">{{ selectedResume.name }}</text>
            <uni-icons type="trash" size="18" class="resume-remove" @click.stop="removeResume"></uni-icons>
          </view>
        </view>
        
        <view class="apply-message">
          <text class="message-title">留言</text>
          <textarea 
            class="message-input" 
            placeholder="请输入您想对招聘方说的话（选填）"
            v-model="applyMessage"
            maxlength="200"
          ></textarea>
          <text class="message-count">{{ applyMessage.length }}/200</text>
        </view>
        
        <button class="submit-apply-btn" @click="submitApplication">
          确认申请
        </button>
      </view>
    </view>

    <!-- 分享弹窗 -->
    <view class="share-modal" v-if="showShareModal">
      <view class="modal-mask" @click="closeShareModal"></view>
      <view class="share-content">
        <text class="share-title">分享职位</text>
        <view class="share-options">
          <view class="share-option" v-for="(option, i) in shareOptions" :key="i" @click="shareJob(option.type)">
            <view class="share-icon" :class="option.iconClass">
              <uni-icons :type="option.icon" size="28"></uni-icons>
            </view>
            <text class="share-name">{{ option.name }}</text>
          </view>
        </view>
        <text class="share-cancel" @click="closeShareModal">取消</text>
      </view>
    </view>

    <!-- 举报弹窗 -->
    <view class="report-modal" v-if="showReportModal">
      <view class="modal-mask" @click="closeReportModal"></view>
      <view class="report-content">
        <text class="report-title">举报该职位</text>
        <view class="report-reasons">
          <view 
            class="report-reason" 
            :class="{ selected: selectedReason === reason.value }"
            v-for="(reason, i) in reportReasons" 
            :key="i"
            @click="selectedReason = reason.value"
          >
            <text>{{ reason.label }}</text>
          </view>
        </view>
        <textarea 
          class="report-detail" 
          placeholder="请详细描述举报原因（选填）"
          v-model="reportDetail"
          maxlength="200"
        ></textarea>
        <view class="report-actions">
          <text class="report-cancel" @click="closeReportModal">取消</text>
          <text class="report-confirm" @click="submitReport">确认举报</text>
        </view>
      </view>
    </view>

    <!-- 申请成功提示 -->
    <view class="success-toast" v-if="showSuccessToast">
      <view class="toast-content">
        <uni-icons type="success" size="40" class="success-icon"></uni-icons>
        <text class="success-text">申请已提交</text>
        <text class="success-desc">招聘方将尽快查看您的简历</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 职位ID，从路由参数获取
      jobId: '',
      
      // 职位详情数据
      job: {
        id: 1,
        title: '资深航拍飞手',
        salary: '15-25',
        salaryPeriod: 'k/月',
        location: '北京·朝阳区',
        experience: '3-5年',
        education: '大专及以上',
        mode: 'fulltime',
        modeText: '全职',
        isUrgent: false,
        isHot: true,
        collected: false,
        companyName: '天际航拍传媒',
        companyLogo: 'https://picsum.photos/id/111/100/100',
        companyDesc: '专业从事影视航拍、测绘勘察、赛事直播的无人机服务公司',
        description: [
          [
            '负责影视级航拍镜头的规划与执行',
            '根据拍摄需求制定飞行方案和应急预案',
            '完成航拍数据的初步处理和素材整理',
            '负责无人机设备的日常维护和保养',
            '指导助理飞手完成辅助工作'
          ],
          [
            '3年以上专业航拍经验，有影视拍摄经验者优先',
            '持有CAAC或AOPA有效执照',
            '熟练操作大疆悟系列、精灵4 Pro等专业航拍设备',
            '具备良好的镜头感和构图能力',
            '能够适应户外作业和弹性工作时间',
            '有驾照者优先'
          ]
        ],
        licenseRequirements: ['CAAC执照', 'AOPA证书'],
        droneTypes: ['大疆悟2', '精灵4 Pro', 'Mavic 3'],
        skills: ['航拍技巧', '后期剪辑', '航线规划', '应急处理'],
        projectExperience: '有大型活动或影视项目航拍经验者优先',
        benefits: [
          '薪资高于行业平均水平',
          '五险一金，带薪年假',
          '专业设备支持',
          '定期技能培训',
          '团队年轻有活力',
          '项目奖金+年终分红'
        ],
        contactPerson: '张经理',
        contactPhone: '138****5678',
        contactEmail: 'hr@tianji-aerial.com',
        publishTime: '2023-10-25'
      },
      
      // 相似职位
      similarJobs: [
        {
          id: 7,
          title: '影视航拍飞手',
          companyName: '光影影视制作',
          location: '北京·海淀区',
          experience: '2-4年',
          salary: '18-28',
          salaryPeriod: 'k/月'
        },
        {
          id: 8,
          title: '首席无人机飞手',
          companyName: '全景影像科技',
          location: '北京·西城区',
          experience: '5年以上',
          salary: '25-40',
          salaryPeriod: 'k/月'
        },
        {
          id: 9,
          title: '无人机航拍指导',
          companyName: '视觉传媒集团',
          location: '北京·东城区',
          experience: '3-5年',
          salary: '20-30',
          salaryPeriod: 'k/月'
        }
      ],
      
      // 弹窗状态
      showApplyModal: false,
      showShareModal: false,
      showReportModal: false,
      showSuccessToast: false,
      
      // 申请相关
      selectedResume: null,
      applyMessage: '',
      
      // 举报相关
      reportReasons: [
        { label: '虚假职位', value: 'fake' },
        { label: '薪资不符', value: 'salary' },
        { label: '信息不实', value: 'false-info' },
        { label: '非法职位', value: 'illegal' },
        { label: '其他原因', value: 'other' }
      ],
      selectedReason: '',
      reportDetail: '',
      
      // 分享选项
      shareOptions: [
        { name: '微信好友', icon: 'weixin', iconClass: 'wechat', type: 'wechat' },
        { name: '朋友圈', icon: 'friends', iconClass: 'moments', type: 'moments' },
        { name: 'QQ', icon: 'qq', iconClass: 'qq', type: 'qq' },
        { name: '复制链接', icon: 'link', iconClass: 'link', type: 'link' }
      ]
    };
  },
  
  onLoad(options) {
    // 获取职位ID
    this.jobId = options.id || '';
    // 实际项目中这里应该根据ID请求接口获取职位详情
    this.loadJobDetail();
	uni.setNavigationBarTitle({
		title:options.title
	})
  },
  
  methods: {
    // 加载职位详情
    loadJobDetail() {
      // 模拟API请求
      setTimeout(() => {
        // 在实际项目中，这里会根据this.jobId请求后端接口获取数据
        console.log(`加载职位ID为${this.jobId}的详情`);
        // 这里使用模拟数据
      }, 500);
    },
    
    // 返回上一页
    navBack() {
      uni.navigateBack();
    },
    
    // 切换收藏状态
    toggleCollect() {
      this.job.collected = !this.job.collected;
      
      // 收藏动画
      const collectBtn = this.$el.querySelector('.collect-btn');
      if (collectBtn) {
        collectBtn.classList.add('collect-animate');
        setTimeout(() => {
          collectBtn.classList.remove('collect-animate');
        }, 500);
      }
      
      uni.showToast({
        title: this.job.collected ? '收藏成功' : '取消收藏',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 查看公司详情
    viewCompany() {
      uni.navigateTo({
        url: `/pages/company/company-detail?id=${this.job.companyId || 1}`
      });
    },
    
    // 前往相似职位
    gotoSimilarJob(job) {
      uni.navigateTo({
        url: `/pages/jobs/drone-job-detail?id=${job.id}`
      });
    },
    
    // 显示申请弹窗
    showApplyModal() {
      this.showApplyModal = true;
    },
    
    // 关闭申请弹窗
    closeApplyModal() {
      this.showApplyModal = false;
    },
    
    // 选择简历
    selectResume() {
      // 模拟选择文件
      uni.chooseFile({
        count: 1,
        extension: ['.pdf', '.doc', '.docx'],
        success: (res) => {
          if (res.tempFiles && res.tempFiles.length > 0) {
            this.selectedResume = res.tempFiles[0];
          }
        }
      });
    },
    
    // 移除简历
    removeResume() {
      this.selectedResume = null;
    },
    
    // 提交申请
    submitApplication() {
      if (!this.selectedResume) {
        uni.showToast({
          title: '请上传简历',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      
      // 模拟提交申请
      this.closeApplyModal();
      
      // 显示成功提示
      this.showSuccessToast = true;
      setTimeout(() => {
        this.showSuccessToast = false;
      }, 2000);
    },
    
    // 开始在线咨询
    startChat() {
      uni.navigateTo({
        url: `/pages/chat/chat?id=${this.job.companyId || 1}&name=${this.job.companyName}`
      });
    },
    
    // 显示分享弹窗
    showShareModal() {
      this.showShareModal = true;
    },
    
    // 关闭分享弹窗
    closeShareModal() {
      this.showShareModal = false;
    },
    
    // 分享职位
    shareJob(type) {
      this.closeShareModal();
      
      // 模拟分享功能
      let message = '';
      switch(type) {
        case 'wechat':
          message = '已分享给微信好友';
          break;
        case 'moments':
          message = '已分享到朋友圈';
          break;
        case 'qq':
          message = '已分享给QQ好友';
          break;
        case 'link':
          message = '链接已复制到剪贴板';
          break;
      }
      
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 1500
      });
    },
    
    // 显示举报弹窗
    showReportModal() {
      this.showReportModal = true;
    },
    
    // 关闭举报弹窗
    closeReportModal() {
      this.showReportModal = false;
    },
    
    // 提交举报
    submitReport() {
      if (!this.selectedReason) {
        uni.showToast({
          title: '请选择举报原因',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      
      // 模拟提交举报
      this.closeReportModal();
      
      uni.showToast({
        title: '举报已提交，感谢您的反馈',
        icon: 'none',
        duration: 2000
      });
      
      // 重置举报内容
      this.selectedReason = '';
      this.reportDetail = '';
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$danger: #FF4D4F;
$warning: #FF7D00;
$success: #00B42A;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$border-light: #E5E6EB;
$shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);

.job-detail-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
  padding-bottom: 80px; // 为底部按钮留出空间
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .back-btn, .share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }
}

// 职位头部卡片
.job-header-card {
  position: relative;
  background-color: $bg-white;
  padding: 20px 16px;
  margin-bottom: 12px;
  
  .job-tag {
    position: absolute;
    top: 20px;
    right: 16px;
    background-color: $danger;
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    
    &.hot {
      background-color: $warning;
    }
  }
  
  .job-title {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  
  .salary-box {
    margin-bottom: 16px;
    
    .salary {
      font-size: 22px;
      font-weight: 700;
      color: $danger;
    }
  }
  
  .job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    
    .meta-item {
      font-size: 14px;
      color: $text-secondary;
      padding-right: 12px;
      position: relative;
      
      &:not(:last-child)::after {
        content: '•';
        position: absolute;
        right: -2px;
        top: 0;
        font-size: 10px;
      }
    }
  }
  
  .job-actions {
    display: flex;
    justify-content: space-around;
    padding-top: 16px;
    border-top: 1px solid $border-light;
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: $text-tertiary;
      
      .action-text {
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }
}

// 公司信息卡片
.company-info-card {
  background-color: $bg-white;
  padding: 16px;
  margin-bottom: 12px;
  
  .company-header {
    display: flex;
    align-items: center;
    
    .company-logo {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .company-basic {
      flex: 1;
      
      .company-name {
        font-size: 16px;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 4px;
      }
      
      .company-desc {
        font-size: 14px;
        color: $text-secondary;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    
    .view-company-btn {
      display: flex;
      align-items: center;
      color: $primary;
      font-size: 14px;
    }
  }
}

// 职位内容区域
.job-content {
  padding: 0 16px;
  
  .content-section {
    background-color: $bg-white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    
    &.contact-section {
      margin-bottom: 20px;
    }
  }
  
  .section-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 16px;
    
    .title-icon {
      margin-right: 8px;
      color: $primary;
    }
  }
  
  .section-content {
    color: $text-secondary;
    font-size: 14px;
    line-height: 1.6;
  }
}

// 职位描述
.job-description {
  .description-item {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .item-title {
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 8px;
    font-size: 15px;
  }
  
  .item-content {
    padding-left: 4px;
  }
  
  .content-point {
    display: flex;
    margin-bottom: 10px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .point-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: $primary;
    margin-top: 8px;
    margin-right: 10px;
    flex-shrink: 0;
  }
}

// 专业要求
.requirement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.requirement-item {
  .requirement-label {
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 8px;
    font-size: 14px;
  }
  
  .requirement-value {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .license-tag {
    background-color: rgba(22, 93, 255, 0.1);
    color: $primary;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
  
  .equipment-tag {
    background-color: rgba(0, 180, 42, 0.1);
    color: $success;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
  
  .skill-tag {
    background-color: rgba(255, 125, 0, 0.1);
    color: $warning;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
}

// 福利待遇
.benefits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  
  .benefit-item {
    display: flex;
    align-items: center;
    width: calc(50% - 6px);
    
    .benefit-icon {
      color: $success;
      margin-right: 6px;
    }
  }
}

// 联系方式
.contact-info {
  .contact-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid $border-light;
    
    &:last-child {
      border-bottom: none;
    }
    
    .contact-icon {
      color: $primary;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .contact-detail {
      flex: 1;
      
      .contact-label {
        font-size: 12px;
        color: $text-tertiary;
        margin-bottom: 4px;
      }
      
      .contact-value {
        font-size: 15px;
        color: $text-primary;
      }
    }
  }
}

// 相似职位
.similar-jobs {
  .similar-job-item {
    padding: 12px 0;
    border-bottom: 1px solid $border-light;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .similar-job-title {
    font-size: 15px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 4px;
  }
  
  .similar-job-company {
    font-size: 13px;
    color: $text-secondary;
    margin-bottom: 6px;
  }
  
  .similar-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: $text-tertiary;
    
    .salary {
      color: $danger;
    }
  }
}

// 底部申请按钮栏
.apply-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: $bg-white;
  padding: 12px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .apply-btn {
    flex: 2;
    height: 48px;
    background-color: $primary;
    color: white;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    
    .btn-icon {
      margin-right: 8px;
    }
    
    &:active {
      background-color: #0E42D2;
    }
  }
  
  .chat-btn {
    flex: 1;
    height: 48px;
    background-color: white;
    color: $primary;
    border: 1px solid $primary;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .btn-icon {
      margin-right: 8px;
    }
    
    &:active {
      background-color: $primary-light;
    }
  }
}

// 申请弹窗
.apply-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    animation: slideUp 0.3s;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
    }
    
    .modal-close {
      color: $text-tertiary;
    }
  }
  
  .resume-upload {
    margin-bottom: 24px;
    
    .upload-title {
      font-size: 15px;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 12px;
      display: block;
    }
    
    .upload-area {
      border: 1px dashed $border-light;
      border-radius: 8px;
      padding: 30px 16px;
      text-align: center;
      color: $text-tertiary;
      transition: all 0.2s;
      
      &:active {
        background-color: $bg-light;
      }
      
      .upload-icon {
        color: $text-tertiary;
        margin-bottom: 12px;
      }
      
      .upload-text {
        font-size: 14px;
        margin-bottom: 4px;
        display: block;
      }
      
      .upload-desc {
        font-size: 12px;
        color: $text-tertiary;
      }
    }
    
    .resume-preview {
      display: flex;
      align-items: center;
      padding: 12px;
      background-color: $bg-light;
      border-radius: 8px;
      margin-top: 12px;
      
      .resume-icon {
        color: $primary;
        margin-right: 10px;
      }
      
      .resume-name {
        flex: 1;
        font-size: 14px;
        color: $text-primary;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .resume-remove {
        color: $text-tertiary;
      }
    }
  }
  
  .apply-message {
    margin-bottom: 24px;
    
    .message-title {
      font-size: 15px;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 12px;
      display: block;
    }
    
    .message-input {
      width: 100%;
      height: 100px;
      padding: 12px;
      border: 1px solid $border-light;
      border-radius: 8px;
      font-size: 14px;
      color: $text-primary;
      resize: none;
      box-sizing: border-box;
      
      &::placeholder {
        color: $text-tertiary;
      }
    }
    
    .message-count {
      display: block;
      text-align: right;
      font-size: 12px;
      color: $text-tertiary;
      margin-top: 8px;
    }
  }
  
  .submit-apply-btn {
    width: 100%;
    height: 48px;
    background-color: $primary;
    color: white;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    
    &:active {
      background-color: #0E42D2;
    }
  }
}

// 分享弹窗
.share-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .share-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    animation: slideUp 0.3s;
    
    .share-title {
      display: block;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 24px;
    }
    
    .share-options {
      display: flex;
      justify-content: space-around;
      margin-bottom: 32px;
    }
    
    .share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .share-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      
      &.wechat {
        background-color: #07C160;
        color: white;
      }
      
      &.moments {
        background-color: #37C265;
        color: white;
      }
      
      &.qq {
        background-color: #12B7F5;
        color: white;
      }
      
      &.link {
        background-color: $primary;
        color: white;
      }
    }
    
    .share-name {
      font-size: 14px;
      color: $text-secondary;
    }
    
    .share-cancel {
      display: block;
      text-align: center;
      font-size: 16px;
      color: $text-secondary;
      padding: 12px 0;
      border-top: 1px solid $border-light;
    }
  }
}

// 举报弹窗
.report-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .report-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s;
    
    .report-title {
      display: block;
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 20px;
    }
    
    .report-reasons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .report-reason {
      padding: 8px 16px;
      background-color: $bg-light;
      color: $text-secondary;
      font-size: 14px;
      border-radius: 6px;
      white-space: nowrap;
      
      &.selected {
        background-color: $primary;
        color: white;
      }
    }
    
    .report-detail {
      width: 100%;
      height: 100px;
      padding: 12px;
      border: 1px solid $border-light;
      border-radius: 8px;
      font-size: 14px;
      color: $text-primary;
      resize: none;
      box-sizing: border-box;
      margin-bottom: 20px;
      
      &::placeholder {
        color: $text-tertiary;
      }
    }
    
    .report-actions {
      display: flex;
      justify-content: space-around;
      padding-top: 12px;
      border-top: 1px solid $border-light;
      
      .report-cancel {
        font-size: 16px;
        color: $text-secondary;
        padding: 8px 24px;
      }
      
      .report-confirm {
        font-size: 16px;
        color: $danger;
        padding: 8px 24px;
      }
    }
  }
}

// 申请成功提示
.success-toast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s;
  
  .toast-content {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    width: 280px;
    text-align: center;
    animation: scaleIn 0.3s;
  }
  
  .success-icon {
    color: $success;
    margin-bottom: 16px;
  }
  
  .success-text {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 8px;
    display: block;
  }
  
  .success-desc {
    font-size: 14px;
    color: $text-secondary;
  }
}

// 动画效果
.collect-animate {
  animation: collectPulse 0.5s;
}

@keyframes collectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
</style>
    